<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>002-字符串的扩展</title>
</head>
<body>
<div id="box1">
    <p>123</p>
</div>
</body>

<script type="text/javascript">
    console.log('=============== 字符串可以被for...of循环遍历 ===============');
    // 字符串可以被for...of循环遍历
    for (let ch of '张三') {
        console.log(ch);
    }

    console.log('=============== 模板字符串 ===============');

    // 插入HTML
    let box1 = document.getElementById('box1');
    let origin = box1.innerHTML;
    box1.innerHTML = origin + `
        <a href="https://www.baidu.com">百度</a>
    `;

    // 普通字符串
    const s1 = `hello world`;
    console.log('s1:', s1);

    // 多行字符串
    // 所有模板字符串的空格和换行，都是被保留的，如果你不想要这个换行，可以使用trim方法消除它。
    const s2 = `
        hello
        world
    `;
    console.log('s2:', s2);
    console.log('s2.trim():', s2.trim());

    // 在字符串中嵌入变量
    const name = '张三', age = 18;
    const s3 = `${name}今年${age}岁了。`;
    console.log('s3:', s3);

    // 在模板字符串中使用反引号需要加转义
    const s4 = `\`bob\`, hello`;
    console.log('s4:', s4);

    // ${}内可以做任何计算
    let x1 = 1, y1 = 2;
    const s5 = `${x1} + ${y1} = ${x1 + y1}`;
    console.log('s5:', s5);

    let obj1 = {x: 1, y: 2};
    const s6 = `${obj1.x + obj1.y}`;
    console.log('s6:', s6);

    // 模板字符串之中还能调用函数
    function func1() {
        return 'Hello World!';
    }

    const s7 = `${func1()} zs`;
    console.log('s7:', s7);


    console.log('=============== 标签模板 ===============');
    /**
     * tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，
     * 也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。
     */
    const person = {name: 'zs', age: 18};

    function func2(arr, v1, v2) {
        for (let i of arr) {
            console.log(i);
        }
        console.log("v1:", v1);
        console.log("v2:", v2);
    }

    func2`Hello, ${person.name}, 今年${person.age}岁了。`;


    // JavaScript 函数 有 arguments 对象
    function argumentsTestFunc(param1, param2, param3) {
        for (const index in arguments) {
            console.log(`param${parseInt(index) + 1}:`, arguments[index]);
        }
    }

    argumentsTestFunc(1, 2, 3);

    // “标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。
    const sender = "<" + "script" + ">" + "alert('123')" + "</" + "script" + ">"; // 恶意代码
    function safeHTML(arr) {
        console.log("arr: ", arr);
        let s = arr[0];
        console.log("arguments:", arguments);
        for (let i = 1; i < arguments.length; i++) {
            let arg = String(arguments[i]);
            s += arg.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;");
            s += arr[i];
        }
        return s;
    }

    console.log("safeHTML:", safeHTML`<p>${sender} has sent you a message.</p>`);
</script>

</html>